// packageF/others/customerCenter/component/port-echart/port-echart.js
const echarts = require("../../../../../ec-canvas/echarts"); //路径一定要正确否则会调用错误
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    port: {
      type: Array,
      value: () => []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    eChartData: [],
    defaultData: [{
        name: "Wap",
        people: 0,
        total: 0
      },
      {
        name: "公众号",
        people: 0,
        total: 0
      },
      {
        name: "小程序",
        people: 0,
        total: 0
      },
      {
        name: "APP",
        people: 0,
        total: 0
      },
      {
        name: "PC",
        people: 0,
        total: 0
      }
    ],
    ecIncome: {
      lazyLoad: false, // 延迟加载
    },
  },
  lifetimes:{
    attached(){
      
    }
  },
  observers:{
    'port'(idata){
      this.setECharts()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    setECharts(){
      this.initData();
      this.initBarECHarts();
      this.initPieECharts();
    },
    initPieECharts(){
      let echartsComponnet = this.selectComponent("#pie-port-chart");
      let option = {
        title: {
          bottom: "3%",
          right: "20%",
          text: "访问人数",
          textStyle: {
            color: "#a7b7c7",
            fontSize: 14,
            fontWeight: "bold"
          }
        },
        legend: {
          type: "plain",
          orient: "vertical",
          x: "5%",
          y: "center"
        },
        series: [
          {
            type: "pie",
            center: ["70%", "50%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            minAngle: 15, //最小角度
            startAngle: 270, //起始角度
            label: {
              show: false,
              position: "center",
              formatter: "{style1|{b}}\n{style2|{c} 人}",
              rich: {
                style1: {
                  fontSize: 12,
                  fontWeight: "bold"
                },
                style2: {
                  fontSize: 10,
                  color: "#999"
                }
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold"
              }
            },
            data: []
          }
        ]
      };
      let itemColors = {
        Wap: "#f17953",
        公众号: "#5d76e4",
        小程序: "#33c6fd",
        APP: "#fdb43a",
        PC: "#51c186"
      };
      option.series[0].data = this.data.eChartData.map(item => {
        return {
          name: item.name,
          value: item.people,
          itemStyle: {
            color: itemColors[item.name]
          }
        };
      });
      option.legend.formatter = function(name) {
        let data = option.series[0].data;
        let v = data.find(item => item.name == name);
        return `${name}: ${v.value}`;
      };
      echartsComponnet.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        Chart.setOption(option);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return Chart;
      });
    },
    initBarECHarts(){
      let echartsComponnet = this.selectComponent("#bar-port-chart");
      let option = {
        title: {
          top: "6%",
          left: "5%",
          text: "端口访问",
          subtext: "{b_title|访问次数}",
          textStyle: {
            color: "#0a0a14",
            fontWeight: "bold"
          },
          subtextStyle: {
            rich: {
              b_title: {
                color: "#a7b7c7",
                fontSize: 14,
                fontWeight: "bold",
                padding: [3, 4, 5, 125]
              }
            }
          }
        },
        grid: {
          top: "35%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        xAxis: {
          axisTick: { show: false },
          axisLine: { onZero: false, lineStyle: { color: "rgb(208,208,208)", width: 1 } },
          axisLabel: { interval: 0, color: "rgb(108,108,108)" },
          type: "category"
        },
        yAxis: [
          {
            type: "value",
            min: 3,
            minInterval: 1,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { type: "dashed" } }
          }
        ],
        dataset: {},
        series: [
          {
            type: "bar",
            symbol: "circle",
            symbolSize: 8,
            barWidth: 20,
            itemStyle: { color: "rgb(24,144,255)" }
          }
        ]
      };
      // 指定数据集
      option.dataset.dimensions = ["name", "total"];
      option.dataset.source = this.data.eChartData;
      echartsComponnet.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        Chart.setOption(option);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return Chart;
      });
      // myECharts.setOption(option);
    },
    initData(){
      if (this.data.port && this.data.port.length > 0) {
        this.data.eChartData = this.data.port;
      } else {
        this.data.eChartData = this.data.defaultData;
      }
    }
  }
})